<script setup>
import OImage from "../setting/Images.vue";
import Color from "../setting/Color.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Slider from "../setting/Slider.vue";
import PrizePopupSelect from "../setting/PrizePopupSelect.vue";
import { newRandomUid } from "@/utils";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  uid: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  group: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["update:config", "change"]),
  createPage = inject("createPage", null),
  deletePage = inject("deletePage");

const activeName = ref(0),
  form = ref({
    $position: { left: 20, top: 0 },
    $size: { width: 335 },
    $removeable: true,
    type: 2,
    btnImg: "./imagesStatic/activity/vote_btn2.png",
    btnSize: { width: 129, height: 28 },
    borderRadius: 10,
    bgColor: "#ffffff",
    nameColor: "#000000",
    voteNumColor: "#000000",
    statisColor: "#000000",
    searchColor: "#ffffff",
    searchBgColor: "rgba(0,0,0,.1)",
    defaultImg: "./imagesStatic/activity/vote_img.jpg",
    numBg: "./imagesStatic/activity/vote_num.png",
    numBgSize: { width: 38, height: 18 },
    numBgPosition: { left: 0, top: 0 },
    showCover: true,
    contentPosition: { left: 10, top: 10 },
    contentSize: { width: 315, height: 80 },
  });

const formRef = ref();

const typeList = [
    {
      key: 1,
      label: "一列",
    },
    { key: 2, label: "两列" },
  ],
  rules = {
    winnerPopupUid: [
      { required: true, message: "请选择中奖弹窗", trigger: "change" },
    ],
    thanksPopupUid: [
      { required: true, message: "请选择未中奖弹窗", trigger: "change" },
    ],
  };

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const initConfig = () => {
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `VoteOnly-${newRandomUid()}`;
    detail.value.rankBtnUid = newRandomUid();
    emits("change", detail.value, {
      uid: detail.value.rankBtnUid,
      type: "BButton",
      name: "排行榜按钮",
      pageConfig: {
        $removeable: false,
        $pageFlag: detail.value.$pageFlag,
        linkType: "system",
        type: "rank",
        img: "https://static.lianhaikeji.com/images/20221201/5cbfdc10c8a54d66bed6dde6fb5b8d68.jpg",
        $size: { width: 80, height: 23 },
      },
    });
    onChange();
  }
  if (createPage) {
    createPage({ pageType: "VoteDetail", pageName: "作品详情" }, [
      {
        name: "作品详情",
        uid: newRandomUid(),
        type: "VoteDetail",
        pageConfig: {
          $pageFlag: detail.value.$pageFlag,
        },
      },
    ]);
    createPage({ pageType: "VoteRank", pageName: "排行榜" }, [
      {
        name: "排行榜",
        uid: newRandomUid(),
        type: "VoteRank",
        pageConfig: {
          $pageFlag: detail.value.$pageFlag,
        },
      },
    ]);
  }
};

// 表单校验
const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        resolve();
      } else
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
    });
  });
};

// 切换封面图显隐
const onToggleCover = (val) => {
  if (val === false) {
    detail.value.type = 1;
  }
  onChange();
};

const onChange = (val, type) => {
  detail.value = detail.value;
};

// 组件移除(同时移除抽奖机会和奖池)
const remove = (pagelist) => {
  let rankBtnIndex = pagelist.findIndex(
    (item) => item.uid === detail.value.rankBtnUid
  );
  pagelist.splice(rankBtnIndex, 1);
  deletePage("VoteDetail");
  deletePage("VoteRank");
};

onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});

defineExpose({ check, remove });
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    :rules="rules"
    :disabled="disabled"
    label-width="auto"
  >
    <el-form-item label="布局方式:" prop="type">
      <el-radio-group v-model="detail.type" @change="onChange">
        <el-radio
          v-for="item in typeList"
          :label="item.key"
          :disabled="detail.showCover === false && item.key == 2"
          >{{ item.label }}</el-radio
        >
      </el-radio-group>
    </el-form-item>
    <el-form-item label="封面图:" prop="showCover">
      <el-switch
        v-model="detail.showCover"
        inline-prompt
        active-text="显示"
        inactive-text="隐藏"
        @change="onToggleCover"
      >
      </el-switch>
    </el-form-item>
    <PrizePopupSelect v-model="detail" :group="group" @change="onChange" />
    <Slider
      v-model="detail.borderRadius"
      name="圆角"
      :max="20"
      @change="onChange"
    />
    <AlphaColor
      v-model="detail.searchBgColor"
      name="搜索框背景色"
      @change="onChange"
    />
    <Color
      v-model="detail.searchColor"
      name="搜索框文字颜色"
      @change="onChange"
    />
    <AlphaColor v-model="detail.bgColor" name="作品背景色" @change="onChange" />
    <Color
      v-model="detail.statisColor"
      name="投票统计颜色"
      @change="onChange"
    />
    <Color v-model="detail.nameColor" name="名称颜色" @change="onChange" />
    <Color v-model="detail.voteNumColor" name="票数颜色" @change="onChange" />
    <OImage
      v-model="detail.numBg"
      v-model:size="detail.numBgSize"
      name="编号背景图"
      @change="onChange"
    />
    <OImage
      v-model="detail.btnImg"
      v-model:size="detail.btnSize"
      name="投票按钮"
      @change="onChange"
    />
    <OImage v-model="detail.defaultImg" name="默认封面图" @change="onChange" />
  </el-form>
</template>
